<template>
  <main>
    <manage-table
      :tableName="tableName"
      :tableHeader="tableHeader"
      :dataList="typeList"
      :currentPage="currentPage"
      :pageSize="pageSize"
      @edit="edit"
      @remove="remove"
      @editParent="editParent"
    ></manage-table>
    <div class="table-page">
      <Page 
        :total="totalType" 
        :current="currentPage" 
        :page-size="pageSize"
        @on-change="changePage" 
        show-elevator 
      />
    </div>
    <Modal v-model="modal" :title="confirmMsg.title" @on-ok="confirm">
      <p>
        {{confirmMsg.pre}}
        <span style="color: #ff9900">{{confirmMsg.name}}</span>
        {{confirmMsg.suf}}
      </p>
    </Modal>
    <Modal v-model="update" title="修改父分类" @on-ok="updateParent">
      <Input type="text" v-model="parentType.name" placeholder="分类名">
        <Icon type="ios-folder" slot="prepend"></Icon>
      </Input>
    </Modal>
  </main>
</template>

<script>
import { 
  findTypeList,
  deleteType,
  updateType
} from 'service'

export default {
  name: 'TypeManage',
  data() {
    return {
      modal: false,
      update: false,
      tableName: 'type-manage',
      tableHeader: [
        {title: ' ', slot: 'number'},
        {title: '名称', key: 'name'},
        {title: '父分类', key: 'parentName'},
        {title: ' ', slot: 'update'},
        {title: '博客数量', key: 'blogCount'},
        {title: '操作', slot: 'action'}
      ],
      typeList: [],
      typeId: 0,
      totalType: 0,
      currentPage: 1,
      pageSize: 7,
      confirmMsg: {
        title: '删除分类',
        pre: '您正在准备删除分类 ' ,
        name: '',
        suf: ' 确定吗？'
      },
      parentType: {
        id: 0,
        name: ''
      }
    }
  },
  created() {
    this.getTypeList()
  },
  watch: {
    $route(to, from) {
      if(from.path.indexOf('type/edit') !== -1 || from.path.indexOf('type/publish') !== -1) {
        this.getTypeList()
      }
    }
  },
  methods: {
    async getTypeList() {
      let res = await findTypeList()
      var list = []
      res.data.data.forEach(item => {
        var data = {id:0, name:'', parentId:0, parentName:'', blogCount:0}
        if(item.childTypes.length === 0) {
          list.push(data)
          list[list.length-1].id = item.id
          list[list.length-1].name = item.name
          list[list.length-1].parentId = null
          list[list.length-1].parentName = ''
          list[list.length-1].blogCount = item.blogCount
        } else {
          item.childTypes.forEach(child => {
            data = {id:0, name:'', parentId:0, parentName:'', blogCount:0}
            list.push(data)
            list[list.length-1].id = child.id
            list[list.length-1].name = child.name
            list[list.length-1].parentId = child.parentId
            list[list.length-1].parentName = item.name
            list[list.length-1].blogCount = child.blogCount
          })
        }
      })
      this.totalType = list.length
      // 伪分页
      this.typeList = list.slice(
        (this.currentPage-1) * this.pageSize, 
        this.pageSize * this.currentPage
      )
    },
    async changePage(currentPage) {
      this.currentPage = currentPage
      await this.getTypeList()
    },
    // 编辑分类
    edit(id) {
      this.$router.push({
        path: '/profile/type/edit/' + id
      })
    },
    // 删除分类
    remove(row) {
      this.typeId = row.id
      this.confirmMsg.name = row.name
      if(row.blogCount !== 0) {
        this.$Message.warning({content: '该分类下有博客，不能删除'})
      } else {
        this.modal = true
      } 
    },
    async confirm() {
      let res = await deleteType(this.typeId)
      if (res.data.flag) {
        this.$Message.success({content: '删除分类成功!'})
        this.currentPage = 1
        await this.getTypeList()
      } else {
        this.$Message.error({content: res.data.errorMsg})
      }
    },
    editParent(row) {
      this.parentType.id = row.parentId
      this.parentType.name = row.parentName
      this.update = true
    },
    async updateParent() {
      let res = await updateType(this.parentType)
      if (res.data.flag) {
        this.$Message.success({content: '修改父分类成功!'})
        await this.getTypeList()
      } else {
        this.$Message.error({content: res.data.errorMsg})
      }
    }
  },
  components: {
    "manage-table": () => import("./unit/ManageTable")
  }
}
</script>

<style lang="scss" scoped>
main {
  max-width: 1000px;
  .table-page {
    margin-bottom: 2rem;
    text-align: center;
  }
}
</style>